<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="shortcut icon" href="images/ico.png">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <style>
        * {
            margin: 0;
        }

        body {
            /* background-image: url(images/login_bg2.jpg);
            background-size:100%;
            background-repeat: no-repeat; */
            background-color: rgb(231, 234, 243);
        }

        .content {
            width: 1000px;
            margin: 70px auto;
            /* background-color: #fff; */
            /* border: 1px solid #fff; */
        }

        .head {
            width: 1000px;
            height: 1400px;
            background-color: #fff;
            box-shadow: 0 0 5px 2px rgb(204, 217, 235);
            position: relative;
        }

        #titlepage {
            width: 996px;
            height: 240px;
            /* background-image: url(images/login_bg2.jpg); */
            /* background-size: cover; */
            opacity: 0.9;
            position: absolute;
            left: 2px;
            top: 0;
            overflow: hidden;
        }

        #tp_image {
            width: 996px;
            position: absolute;
        }

        .tp_changebtn {
            width: 130px;
            height: 30px;
            border: 1px solid rgb(204, 217, 235);
            border-radius: 10px;
            color: rgb(226, 228, 255);
            font-size: 12px;
            line-height: 30px;
            text-align: center;
            float: right;
            margin: 5px;
            opacity: 0.5;
        }

        .tp_changebtn svg {
            position: relative;
            top: 3px;
            margin-right: 2px;
        }

        .tp_changebtn:hover {
            opacity: 0.9;
            cursor: pointer;
        }

        #icon {
            width: 180px;
            height: 180px;
            /* background-image: url(images/logo.jpg); */
            background-size: cover;
            opacity: 1;
            position: absolute;
            left: 30px;
            top: 180px;
            border-radius: 10px;
            z-index: 1;
            box-shadow: 2px 2px 3px rgb(60, 193, 255),
                -2px -2px 3px rgb(60, 193, 255);
        }

        #icon_image {
            width: 180px;
            height: 180px;
            border-radius: 10px;
            position: absolute;
        }

        #icon_change {
            width: 180px;
            height: 180px;
            background-color: #000;
            float: left;
            border-radius: 10px;
            display: none;
            text-align: center;
            opacity: 0.5;
        }

        #icon:hover {
            cursor: pointer;
        }

        #icon_change svg {
            position: relative;
            top: 30px;
        }

        #titlepage input,
        #icon input {
            display: none;
        }

        #information {
            width: 740px;
            height: 140px;
            /* background-color: burlywood; */
            position: absolute;
            top: 245px;
            left: 230px;
            padding: 5px;
        }

        #information span {
            display: block;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #aaa;
            font-size: 13px;
            position: absolute;
            top: 15px;
            left: 640px;
        }

        #information svg {
            position: relative;
            top: 3px;
            left: -3px;
        }

        #info_ul {
            list-style: none;
            margin-top: 50px;
        }

        #info_ul li {
            width: 550px;
            /* height: 80px; */
            text-align: left;
            /* background-color: aqua; */
            padding: 40px 0;
        }

        #info_ul a {
            font-weight: 700;
            color: #444;
            font-size: 16px;
            display: inline-block;
            width: 130px;
        }

        li+li {
            border-top: 1px solid #eee;
        }

        textarea {
            float: right;
            margin-right: 200px;
        }

        .submit {
            width: 150px;
            height: 40px;
            border: 1px solid rgb(94, 113, 179);
            border-radius: 10px;
            color: rgb(94, 113, 179);
            font-size: 14px;
            line-height: 40px;
            text-align: center;
            position: relative;
            left: 190px;
            top: 200px;
        }
        .submit:hover{
            cursor: pointer;
        }
        input{
            border: 1px solid transparent;
            /* height: 30px; */
            font-weight: 500;
            /* color: #666; */
            outline: none;
        }
        textarea{
            border: 1px solid transparent;
        }
    </style>
    <script>
        // console.log(Random.constellation())
        window.onload = function () {

            //更改头像鼠标悬浮
            $('#icon').on({
                mouseover: function () {
                    $('#icon_change').css('display', 'block')
                },
                mouseout: function () {
                    $('#icon_change').css('display', 'none')
                }
            })
            $('.tp_changebtn').click(function () {
                $('#tp_input').trigger('click')
            })

            $('#author').val(localStorage['name'])

            $.ajax({
                url:'http://localhost:3000/personal/getUserInfo',
                type:'get',
                data:{
                    uId:localStorage['name']
                },
                dataType:'json',
                success:function(res){
                    console.log(res.data[0])
                    console.log(`http://localhost:3000/upload/${res.data[0].headImg}`)
                    console.log($('#icon_image'))
                    $('#icon_image')[0].src = `http://localhost:3000/upload/${res.data[0].headImg}`
                }
            })

        }

        //更换头像、封面
        function chanagePicture() {
            // console.log("diyici zhixing ")
            document.querySelectorAll('[type="file"]')[1].click()
        }
        function showFileInfo(that) {
            // console.log("wo zhixing ke ")
            var fileReader = new FileReader()
            fileReader.readAsDataURL(that.files[0])
            fileReader.onload = function (e) {
                // console.log(e.target.result)
                document.querySelector('#icon_image').src = e.target.result
            }
        }
        function changeTp() {
            // console.log("diyici zhixing ")
            document.querySelectorAll('[type="file"]')[0].click()
        }
        function showFileInfo2(that) {
            var fileReader = new FileReader()
            fileReader.readAsDataURL(that.files[0])
            fileReader.onload = function (e) {
                document.querySelector('#tp_image').src = e.target.result
            }
        }
        function submit(){
            
            $('#author').val(localStorage['name'])
            var lis = document.querySelector('#info_ul').children
            var nickname = lis[0].firstElementChild.nextElementSibling.value
            if(parseInt(lis[1].firstElementChild.nextElementSibling.checked)== 1){
                var sex = 0
            }else{
                var sex = 1
            }
            var tel = lis[2].firstElementChild.nextElementSibling.value
            var birth = lis[3].firstElementChild.nextElementSibling.value
            var occupy = lis[4].firstElementChild.nextElementSibling.value
            var eMail = lis[5].firstElementChild.nextElementSibling.value
            var signature = lis[6].firstElementChild.nextElementSibling.value
            $.ajax({
                url:'http://localhost:3000/personal/rewrite',
                type:'get',
                data:{
                    uId:localStorage['name'],
                    nickName : nickname,
                    sex : sex,
                    tel : tel,
                    birth : birth,
                    occupy : occupy,
                    eMail : eMail,
                    signature : signature
                },
                dataType:'json',
                success:function(res){
                    // $('#author').val(localStorage['name'])
                    $('#personImg').submit()
                    alert("修改成功")
                    console.log('修改成功')
                    location.href = 'personal.html'
                }
            })
        //    console.log('img',$('#sendImgsss')[0].files)
        // 
        //             $('#personImg').submit()
          
        }


    </script>
</head>

<body>
    <!-- 导航栏 -->
    <div id="Navigation"></div>
    <!-- 版心 -->
    <div class="content">
        <div class="head">
            <div id="titlepage">
               
                <img src="images/login_bg2.jpg" id="tp_image" alt="">
                <input type="text" value="1" name="uId" id="uId">
                <input type="file"  name="sendImgsss" id="sendImgsss" multiple onchange="showFileInfo2(this)">
          
                <div class="tp_changebtn" onclick="changeTp()">
                    <svg t="1597738484243" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4307" width="16" height="16">
                        <path
                            d="M269.44 256l23.296-75.381333A74.666667 74.666667 0 0 1 364.074667 128h295.850666a74.666667 74.666667 0 0 1 71.338667 52.618667L754.56 256H821.333333c64.8 0 117.333333 52.533333 117.333334 117.333333v426.666667c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V373.333333c0-64.8 52.533333-117.333333 117.333334-117.333333h66.773333z m23.605333 64H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v426.666667a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V373.333333a53.333333 53.333333 0 0 0-53.333334-53.333333h-90.378666a32 32 0 0 1-30.570667-22.549333l-30.272-97.930667a10.666667 10.666667 0 0 0-10.186667-7.52H364.074667a10.666667 10.666667 0 0 0-10.186667 7.52l-30.272 97.92A32 32 0 0 1 293.045333 320zM512 725.333333c-88.362667 0-160-71.637333-160-160 0-88.362667 71.637333-160 160-160 88.362667 0 160 71.637333 160 160 0 88.362667-71.637333 160-160 160z m0-64a96 96 0 1 0 0-192 96 96 0 0 0 0 192z"
                            p-id="4308" fill="#eeeeee"></path>
                    </svg>
                    编辑封面图片</div>
            </div>
            <div id="icon" onclick="chanagePicture()">
                <form action="http://localhost:3000/personal/upload" id="personImg" method="POST" enctype="multipart/form-data">
                <img src="images/logo.jpg" id="icon_image" alt="">
                <input type="file" name="personalPicture" id="personPicture" multiple onchange="showFileInfo(this)">
                <input type="text"  name="author" id="author" value="0">
                <div id="icon_change">
                    <svg t="1597738484243" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4307" width="100" height="100">
                        <path
                            d="M269.44 256l23.296-75.381333A74.666667 74.666667 0 0 1 364.074667 128h295.850666a74.666667 74.666667 0 0 1 71.338667 52.618667L754.56 256H821.333333c64.8 0 117.333333 52.533333 117.333334 117.333333v426.666667c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V373.333333c0-64.8 52.533333-117.333333 117.333334-117.333333h66.773333z m23.605333 64H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v426.666667a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V373.333333a53.333333 53.333333 0 0 0-53.333334-53.333333h-90.378666a32 32 0 0 1-30.570667-22.549333l-30.272-97.930667a10.666667 10.666667 0 0 0-10.186667-7.52H364.074667a10.666667 10.666667 0 0 0-10.186667 7.52l-30.272 97.92A32 32 0 0 1 293.045333 320zM512 725.333333c-88.362667 0-160-71.637333-160-160 0-88.362667 71.637333-160 160-160 88.362667 0 160 71.637333 160 160 0 88.362667-71.637333 160-160 160z m0-64a96 96 0 1 0 0-192 96 96 0 0 0 0 192z"
                            p-id="4308" fill="#eeeeee"></path>
                    </svg>
                </div>
            </form>

            </div>

            <div id="information">
                <a href="personal.html"><span>返回我的主页
                        <svg t="1597752503211" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            p-id="23658" width="15" height="15">
                            <path
                                d="M434.944 790.624l-45.248-45.248L623.04 512l-233.376-233.376 45.248-45.248L713.568 512z"
                                fill="#aaaaaa" p-id="23659"></path>
                        </svg></a>
                </span>
                <form action="">
                    <ul id="info_ul">
                        <li><a>昵称</a>
                            <input type="text" id="username" placeholder="请输入您的昵称">
                        </li>
                        <li><a>性别</a>
                            <input type="radio" name="sex" id="" checked>男
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="sex" id="">女
                        </li>
                        <li><a>电话</a>
                            <input type="tel" name="" id="" placeholder="请输入您的电话号码">
                        </li>
                        <li><a>生日</a>
                            <input type="date" name="" id="">
                        </li>
                        <li><a>职业</a>
                            <input type="text" name="" id="" placeholder="请输入您的职业">
                        </li>
                        <li><a>邮箱</a>
                            <input type="email" name="" id="" placeholder="请输入您的邮箱">
                        </li>
                        <li><a>个人简介</a>
                            <textarea name="" id="" cols="30" rows="10"></textarea>
                        </li>
                    </ul>
                    <div class="submit" onclick="submit()">
                        保存个人资料
                    </div>
                </form>
            </div>
        </div>

    </div>

    <script>
        $("#Navigation").load("Navigation.html");
    </script>
</body>

</html>